<template>
  <div class="app-container  bg-gray">
    <el-tabs id="site" type="border-card" class="box-1">
      <el-tab-pane label="页面配置">
        <el-form ref="pageConfigForm" :model="pageConfigForm" :rules="pageConfigFormRules" label-width="160px">
          <el-form-item label="banner顶部图片" prop="banner">
            <ws-upload-single-img v-model="pageConfigForm['banner']"
                                  :path="pageConfigForm['banner']"
                                  width="300" height="160"/>
            <div class="remark">*注:为保证显示效果,请上传750px*400px的图片</div>
          </el-form-item>
          <el-form-item label="文字介绍" prop="intro">
            <el-input v-model="pageConfigForm['intro']" type="textarea" rows="5"/>
          </el-form-item>
          <el-form-item label="边框背景颜色" prop="frameColor">
            <el-color-picker v-model="pageConfigForm.frameColor"/>
          </el-form-item>
          <el-form-item label="主标题文字颜色" prop="titleColor1">
            <el-color-picker v-model="pageConfigForm.titleColor1"/>
          </el-form-item>
          <el-form-item label="副标题文字颜色" prop="titleColor2">
            <el-color-picker v-model="pageConfigForm.titleColor2"/>
          </el-form-item>
        </el-form>
        <div class="text-center">
          <el-button type="primary" class="bg-green" style="width: 120px;" @click="submitForm('pageConfigForm')">保 存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="提示配置">
        <el-form ref="messageConfigForm" :model="messageConfigForm" :rules="messageConfigFormRules" label-width="190px">
          <el-divider content-position="left"><h4>短信提示</h4></el-divider>
          <el-form-item/>
          <el-form-item label="工单回复通知用户模板ID" prop="smsReplyTemplate">
            <el-input v-model="messageConfigForm['smsReplyTemplate']"/>
          </el-form-item>
          <el-form-item label="新工单提醒管理员模板ID" prop="smsReplyTemplate">
            <el-input v-model="messageConfigForm['smsRemindOrder']"/>
          </el-form-item>
          <el-form-item label="新工单提醒管理员电话" prop="smsReplyTemplate">
            <el-input v-model="messageConfigForm['remindMobile']"/>
          </el-form-item>
          <el-form-item/>
          <el-form-item/>
          <el-divider content-position="left"><h4>消息推送-关联公众号（必须服务号）</h4></el-divider>
          <el-form-item/>
          <el-form-item label="工单回复通知" prop="wxReplyTemplate">
            <el-input v-model="messageConfigForm['wxReplyTemplate']" />
          </el-form-item>
          <el-form-item label="付款成功通知" prop="wxPayTemplate">
            <el-input v-model="messageConfigForm['wxPayTemplate']"/>
          </el-form-item>
        </el-form>
        <div class="text-center">
          <el-button type="primary" class="bg-green" style="width: 120px;" @click="submitForm('messageConfigForm')">保 存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageConfigForm: {},
      pageConfigFormRules: {
        // 'tencent_id': [{ required: true, message: '请输入腾讯云账号id', trigger: 'blur' }],
        // 'tencent_appid': [{ required: true, message: '请输入Appid', trigger: 'blur' }],
        // 'tencent_secretid': [{ required: true, message: '请输入Secretid', trigger: 'blur' }],
        // 'tencent_secrekey': [{ required: true, message: '请输入Secrekey', trigger: 'blur' }]
      },
      messageConfigForm: {},
      messageConfigFormRules: {
        // 'tencent_id': [{ required: true, message: '请输入腾讯云账号id', trigger: 'blur' }],
        // 'tencent_appid': [{ required: true, message: '请输入Appid', trigger: 'blur' }],
        // 'tencent_secretid': [{ required: true, message: '请输入Secretid', trigger: 'blur' }],
        // 'tencent_secrekey': [{ required: true, message: '请输入Secrekey', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getSiteConfig()
  },
  methods: {
    /**
     *  获取腾讯云配置
     */
    getSiteConfig() {
      const url = 'newWork/setting/getInfo'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.pageConfigForm = Object.assign({}, res.data);
        this.messageConfigForm = Object.assign({}, res.data);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = formName === 'pageConfigForm' ? 'newWork/setting/update' : 'newWork/setting/updateMsg';
          const data = formName === 'pageConfigForm' ? this.pageConfigForm : this.messageConfigForm;
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.getSiteConfig()
          }).catch(e => {
            this.$message.error(e.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  .el-form {
    max-width: 900px;
  }
}

.dialog {
  .el-input {
    width: 80%;
  }
}
</style>
<style>
  #site .el-tabs__nav-wrap {
    background-color: #304156;
  }
</style>

